package com.csw.compose.ui.module.component.advanced

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.verticalScroll
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material.icons.filled.ShoppingCart
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.NavigationDrawerItem
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.core.content.res.ResourcesCompat
import androidx.core.graphics.drawable.toBitmap
import com.csw.compose.R
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.NormalSpacer
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage
import kotlinx.coroutines.launch

@Preview
@Composable
fun DrawerPagePreview() {
    BasePage({}, "抽屉式导航栏") {
        DrawerPage()
    }
}

class DrawerPageData {
    companion object : Destination("DrawerPage")
}

/**
 *[参考](https://developer.android.google.cn/develop/ui/compose/components/drawer?hl=zh-cn)
 */
@Composable
fun DrawerPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("ModalNavigationDrawer 抽屉式导航栏组件，实现DrawerLayout的效果")

        val drawerState = rememberDrawerState(DrawerValue.Open)
        val scope = rememberCoroutineScope()
        ModalNavigationDrawer(
            drawerState = drawerState,
            drawerContent = {
                // Drawer抽屉组件，内部通过Modifier.windowInsetsPadding避开了顶部和左侧的窗口边称
                // 并且设置了默认样式(Material样式)
                ModalDrawerSheet(
                    modifier = Modifier.width(250.dp),
                    drawerContainerColor = MaterialTheme.colorScheme.primaryContainer,
                    drawerContentColor = MaterialTheme.colorScheme.onPrimaryContainer,
                ) {
                    Row(
                        modifier = Modifier.padding(10.dp),
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        ResourcesCompat.getDrawable(
                            LocalContext.current.resources,
                            R.mipmap.ic_launcher_round,
                            LocalContext.current.theme
                        )?.toBitmap()?.asImageBitmap()?.let {
                            Image(
                                it,
                                "",
                                contentScale = ContentScale.Crop,
                                modifier = Modifier
                                    .size(60.dp)
                                    .clip(CircleShape)
                                    .border(
                                        2.dp,
                                        MaterialTheme.colorScheme.onPrimaryContainer,
                                        CircleShape
                                    )
                            )
                        }
                        NormalSpacer()
                        Text("未登录", style = MaterialTheme.typography.titleLarge)
                    }

                    HorizontalDivider()
                    NavigationDrawerItem(
                        icon = {
                            Icon(Icons.Filled.Home, "")
                        },
                        label = {
                            Text("首页")
                        },
                        selected = true,
                        onClick = {}
                    )
                    NavigationDrawerItem(
                        icon = {
                            Icon(Icons.Filled.ShoppingCart, "")
                        },
                        label = {
                            Text("购物车")
                        },
                        badge = { Text("20") },
                        selected = false,
                        onClick = {},
                    )
                    NavigationDrawerItem(
                        icon = {
                            Icon(Icons.Filled.Settings, "")
                        },
                        label = {
                            Text("设置")
                        },
                        selected = false,
                        onClick = {}
                    )
                }
            },
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp),
        ) {
            Box(
                Modifier
                    .fillMaxSize()
                    .background(Color(1f, 0f, 0f, 0.3f))
            ) {
                Icon(Icons.Filled.Menu, "", Modifier
                    .padding(10.dp)
                    .clickable {
                        scope.launch {
                            drawerState.open()
                        }
                    })
            }
        }
        NormalSpacer()
        UlItem("ModalNavigationDrawer")
        LabelText("抽屉式导航栏组件")
        OlItem(1, "drawerState")
        LabelText("导航栏状态，用于控制导航栏显示或隐藏")
        OlItem(2, "drawerContent")
        LabelText("导航菜单组件")
        OlItem(3, "content")
        LabelText("内容组件")

        LargeSpacer()
        UlItem("ModalDrawerSheet")
        LabelText("导航栏菜单容器")
        LabelText("自动为状态栏、底部导航栏留空间")
        LabelText("Material样式，并且可以指定容器背景颜色及子组件的颜色（主要是文本颜色），文本组件使用Material样式时，会自动使用指定的颜色")

        LargeSpacer()
        UlItem("NavigationDrawerItem")
        LabelText("导航栏菜单条目，支持icon、文字、描述、各状态颜色设置")
    }
}